<template>  
    <view class="container">  
		
		<view class="user-section">
			<view class="bg">
			</view>
			<!-- <image class="bg" src="../../static/qianbao2.png"></image> -->
			<image @click="navTo('/pagesA/user/sign/sign')" style="width: 150upx;height:60upx;position: absolute;right: 2upx;top: 120upx;" src="../../static/qiandao.png" mode=""></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="real_head_img||'/static/missing-face.png'"></image>		
				</view>
				<view class="info-box">
					<view class="userid">
						ID:{{user_id||'12345CS'}}
					</view>
					<text class="username">{{real_name||'游客'}}</text>
					<!-- <text>{{res.id.name}}</text> -->
				</view>
				<view class="" style="margin-left: 220upx;display: flex;">
					<view class="" @click="navTo('/pagesA/notice/notice')" style="display: flex;flex-direction: column;">
						<image style="width: 50upx;height:50upx;" src="../../static/message.png" mode=""></image>
						<text>消息</text>
					</view>
					<view class="" @click="navTo('/pagesA/set/set')" style="display: flex;flex-direction: column;margin-left: 20upx;">
						<image style="width: 50upx;height: 50upx;" src="../../static/set.png" mode=""></image>
						<text>设置</text>
					</view>
				</view>
			</view>
			<!-- <view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn">
					升级代理
				</view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					当前级别:
					<text style="font-weight: bold;font-size: 32upx;">总代</text>
				</view>
				<text class="e-m">成长等级:</text>
				<text class="e-b">我的成长值完成量为86%,小伙伴继续加油!</text>
			</view> -->
			<view class="tj-sction" style="display: flex;flex-direction: column;position: absolute;width: 690upx;">
				<view class="" style="padding:10upx 30upx 0upx 30upx;margin-bottom: -20upx;">
					<view class="">
						<text>当前级别:</text>
						<text style="font-weight: bold;font-size: 34upx;margin: 0upx 15upx;">{{level_name}}</text>
						<!-- <text class="yticon icon-iLinkapp-" style="margin: 0upx 15upx;color: #D6A22D;"></text> -->
						<image style="width: 50upx;height: 50upx;margin: 0upx 20upx -10upx 20upx;" src="../../static/huangguan.png" mode=""></image>
						<text style="color: #7A5B13;">升级代理</text>
					</view>
					<view>
						<text style="color: #ADADAD;">我的成长值完成量为86%,小伙伴继续加油!</text>
						 <progress :percent="percent1" activeColor='#8F8F8F' stroke-width='1' show-info />
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
				<view class="tj-item">
					<text style="color: #000;">被赞 : 
					<text class="num" style="color: #f00;font-weight: 550">256</text></text>
				</view>
				<view class="tj-item">
					<text style="color: #000;">收到评价 : 
					<text class="num" style="font-weight: 550">27</text></text>
				</view>
				<view class="tj-item">
					<text style="color: #000;">积分 : 
					<text class="num" style="font-weight: 550">{{integration}}</text></text>
				</view>
				<view class="tj-item">
					<text style="color: #000;">卡券 : 
					<text class="num" style="font-weight: 550">0</text></text>
				</view>
				</view>
			</view>
		</view>
		
		<view 	class="cover-container">
			<!-- <image class="arc" src="/static/arc.png"></image> -->
			
			
			<!-- 订单 -->
			<view class="order-section" style="display: flex;justify-content: space-between;margin-bottom: -40upx;padding:30upx 20upx 0upx;height: 100upx;margin-top: 355upx;">
			<view class=""  style="font-size: 40upx;font-weight: 550;">
				我的订单
			</view>
			<view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 70upx;" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
				全部 >
			</view>
			</view>
			<view class="order-section" style="margin-top: 40upx;color:#000">
				<!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
				<view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifahuo.png" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=1')"  hover-class="common-hover" :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifukuan.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daishouhuo.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=4')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daipingjia.png" mode=""></image>
					<text>待评价</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=5')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/shouhou.png" mode=""></image>
					<text>已取消</text>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view class="history-section icon">
				<view class="" style="font-size: 40upx;font-weight: 550;padding:0upx 20upx 30upx;">
					我的服务
				</view>
				<view class=""  style="display: flex; flex-wrap: wrap;width: 690upx;height: 400upx;">
					<view class="" @click="navTo('/pagesA/user/mendian/mendian')" style="margin-left: 50upx;">
						<image style=" margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/06.png" mode=""></image>
						<text>附近门店</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/qianbao/qianbao')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/07.png" mode=""></image>
						<text>我的钱包</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/shequ/shequ')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/08.png" mode=""></image>
						<text>我的社区</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/jifen/jifen')" style="margin-left: 50upx;"> 
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/09.png" mode=""></image>
						<text>积分兑换</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/haoyou/haoyou')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/10.png" mode=""></image>
						<text>我的好友</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/sucai/sucai')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/11.png" mode=""></image>
						<text>素材中心</text>
					</view>
					<view class="" @click="navTo('/pagesA/address/address')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/12.png" mode=""></image>
						<text>地址管理</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/huiyuan/huiyuan')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/13.png" mode=""></image>
						<text>沉睡会员</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/kefu/kefu')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/14.png" mode=""></image>
						<text>在线客服</text>
					</view>
					<view class="" @click="navTo('/pagesA/user/bangzhu/bangzhu')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/15.png" mode=""></image>
						<text>帮助中心</text>
					</view>
				</view>
			</view>
		</view>
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState 
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				user_id:'',
				token:'',
				timestamp:'',
				res:[],
				percent1:0,
				percent:'',
				integration:'',
				level_name:'',
				real_head_img:'',
				real_name:'',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				openid:""
			}
		},
		onLoad(){
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
				 this.user_id = res.data
				 this.setajax()
				},
			});
			uni.getStorage({
				key: 'timestamp',
				success: (res) => {
					this.timestamp = res.data
				},
				fail: () => {}
			});
			uni.getStorage({
				key: 'token',
				success: (res) => {
					this.token = res.data
				},
				fail: () => {}
			});
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
		// ...mapState(['hasLogin','userInfo'])
		},
		methods: {
			setajax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/index',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id: this.user_id,
						timestamp: this.timestamp,
						token:this.token,
					},
					success: res => {
						console.log(res)
					this.res = res.data.data
					this.real_name = this.res.real_name
					this.user_id = this.res.id
					this.real_head_img = this.res.real_head_img
					this.level_name = this.res.level_name
					this.integration = this.res.integration
					// console.log(this.res)
					},
					fail: () => {},
					complete: () => {}
				});
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/group',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id:this.user_id,
					},
					success: res => {
					this.percent = res.data.data.percent
					o.percent1 = parseInt(this.percent)
					},
					fail: () => {},
					complete: () => {}
				});
			},

			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
    }  
	}
</script>
<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}

	.user-section{
		height: 450upx;
		padding: 180upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			background-color: #05052B;
			/* opacity: .7; */
		}
	}
	.user-info-box{
		color: #fff;
		height: 170upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		/* padding-top: 50upx; */
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			width: 300upx;
			/* color: $font-color-dark; */
			margin-left: 20upx;
		}
		.userid {
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: 12upx;
			color: #ADADAD;
			margin-top: 20upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -180upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			/* flex-direction: column; */
			height: 90upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 100upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			line-height: 1.2;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 30upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			/* align-items: center; */
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
</style>